<template>
  <div class="tasklist">
    <div class="itemlist">
            <div class="topic">
                <span>正在抢购</span>&emsp;&emsp;
                <span>上新预告</span>
            </div>
            <div class="item">
                <img src="../images/pic_1.png" alt="">
                <div class="right">
                    <div class="name">汉堡王 | 北美新天地餐厅</div>
                    <div class="content">买1送1明星皇堡 | 用心火烤 肉质紧实 鲜嫩多汁 爆爆团</div>
                    <div class="msg">
                        <div class="price">
                            <div>爆爆团价</div>
                            <div>￥25</div>
                        </div>
                        <div class="option">马上抢</div>
                    </div>
                    <div class="prev">
                        <span>￥50</span>
                        <span>已售9029份</span>
                    </div> 
                </div>
            </div>  
            <div class="item">
            <img src="../images/pic_2.png" alt="">
            <div class="right">
                <div class="name">华莱士.全鸡汉堡 | 长治路店</div>
                <div class="content">华莱士 | 聚划算单人套餐 | 进店必选</div>
                <div class="msg">
                    <div class="price">
                        <div>爆爆团价</div>
                        <div>￥12.12</div>
                    </div>
                    <div class="option">马上抢</div>
                </div>
                <div class="prev">
                    <span>￥31.2</span>
                    <span>已售173份</span>
                </div> 
            </div>
            </div>   
    </div>     
  </div>

</template>

<script>
export default {

}
</script>

<style scoped>
    .itemlist .topic{
        background-color: rgb(218, 103, 20);
        color: white;
        padding-left: 10px;
        padding-bottom: 10px;
    }
    .itemlist .item{
        height: 140px;
        border: 1px solid #ccc;
        display: flex;
        margin: 10px;
    }
    .itemlist .item img{
        width: 150px;
    }
    .itemlist .item .right{
        padding-left: 5px;
    }
    .itemlist .item .right .name{
        color: gray;
        font-size: 12px;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .itemlist .item .right .content{
        font-weight: bold;
        font-size: 14px;
    }
    .itemlist .item .right .msg{
        margin-top: 5px;
        display: flex;
    }
    .itemlist .item .right .msg .price{
        color: red;
    }
    .itemlist .item .right .msg .price :nth-child(1){
        font-size: 12px;
    }
    .itemlist .item .right .msg .option{
        width: 90px;
        height: 30px;
        background-color: orangered;
        color: white;
        text-align: center;
        line-height: 30px;
        border-radius: 20px;
        margin-left: 40px;
    }
    .itemlist .item .right .prev{
        margin-top: 5px;
    }
    .itemlist .item .right .prev :nth-child(1){
        text-decoration: line-through;
        font-size: 12px;
        color: gray;
    }
    .itemlist .item .right .prev :nth-child(2){
        font-size: 12px;
        color: red;
        margin-left: 80px;
    }
</style>